<template>
    <div class="dataContainer">
      <!-- Search start -->
      <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer" >
        <!-- <el-form-item label="练习账号: ">
          <el-select
            filterable
            v-model="queryParams.studentID"
            placeholder="请选择练习账号" 
            style="width: 180px;"
            clearable
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.name+item.phone+item.account"
              :value="item.id"
            >
                <span>{{ item.name }}-{{ item.phone }}</span>
                <span style="float: right;color: #c7c7c7;">{{ item.account }}</span>
            </el-option>
                
            </el-select>
        </el-form-item> -->
        <el-form-item label="练习日期: ">
          <el-date-picker
                style="width: 180px;"
                v-model="queryParams.tradeDateStart"
                type="date"
                placeholder="请选择练习开始日期"
                size="small"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDateStart"
            />
            <span>
                <svg t="1758243204848" class="icon" style="vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5276" 
                    width="1.4em" height="1.4em"><path d="M359.354037 457.937888c-3.180124 9.540373-12.720497 15.900621-22.260869 19.080746-9.540373 3.180124-19.080745 3.180124-25.440994 0s-12.720497-9.540373-15.900621-19.080746c-3.180124-9.540373-3.180124-22.26087 3.180124-38.16149 3.180124-12.720497 9.540373-22.26087 19.080745-34.981367 6.360248-9.540373 15.900621-19.080745 25.440994-28.621118s22.26087-15.900621 34.981367-19.080745c12.720497-6.360248 28.621118-6.360248 47.701863-6.360249 25.440994 0 44.521739 6.360248 57.242236 15.900621 12.720497 9.540373 28.621118 22.26087 38.161491 31.801243 12.720497 12.720497 22.26087 22.26087 34.981366 31.801242 12.720497 9.540373 31.801242 15.900621 54.062112 12.720497 15.900621 0 28.621118-3.180124 38.161491-9.540373s19.080745-12.720497 25.440993-19.080745 9.540373-15.900621 12.720497-22.26087 3.180124-15.900621 6.360249-22.260869c0-9.540373 6.360248-19.080745 12.720497-22.26087 6.360248-3.180124 15.900621-6.360248 22.260869-6.360248 9.540373 0 15.900621 3.180124 22.26087 9.540372 6.360248 6.360248 9.540373 12.720497 9.540372 22.26087s-3.180124 22.26087-6.360248 38.161491-12.720497 31.801242-22.26087 47.701863c-12.720497 15.900621-25.440994 28.621118-44.521739 41.341615-19.080745 12.720497-44.521739 15.900621-73.142857 15.900621-28.621118 0-50.881988-3.180124-69.962733-12.720497-19.080745-9.540373-31.801242-19.080745-44.521739-31.801242l-31.801242-31.801242c-9.540373-9.540373-22.26087-15.900621-34.981367-15.900622-9.540373 0-19.080745 0-25.440993 3.180125-6.360248 3.180124-12.720497 9.540373-19.080746 12.720497-6.360248 6.360248-9.540373 12.720497-12.720497 19.080745-9.540373 9.540373-12.720497 15.900621-15.900621 19.080745z" 
                    fill="#8a8a8a" p-id="5277"></path></svg>
            </span>
            <el-date-picker
                style="width: 180px;"
                v-model="queryParams.tradeDateEnd"
                type="date"
                placeholder="请选择练习结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDateEnd"
            />
        </el-form-item>
        <el-form-item label="品种合约: ">
            <el-input v-model="queryParams.instrumentCode" placeholder="请输入品种合约"  @keyup.enter="onSearch"  style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="买/卖: ">
            <el-select v-model="queryParams.offsetFlag" placeholder="请输入买/卖" collapse-tags clearable  style="width: 180px">
                <template v-for="item in buyOrSellList" :key="item.id">
                    <el-option :label="item.dicName" :value="item.dicValue" />
                </template>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
          <ResetButton :queryParams="queryParams"/>
          <el-button size="small" type="primary" @click="openAddModal"><el-icon><Plus /></el-icon>新增 </el-button>
        </el-form-item>
      </el-form>
      <!-- Search end -->
  
      <!-- Table start -->
      <div >
        <el-table
          ref="tableRef"
          v-loading="tableLoading"
          :border="true"
          class="bs-table"
          :data="tableData"
          row-key="id"
          :height="tableHeight"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{textAlign: 'center'}"
        >
          <el-table-column type="index" label="序号" width="80" fixed/>
          <template v-for="item in columnList" :key="item.prop">
            <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
              <template #default="scope">
                <template v-if="item.prop=='dataSource'">
                  <div v-if="scope.row.dataSource==1">系统数据</div>
                  <div v-else-if="scope.row.dataSource==0">外部推送</div>
                </template>
                <template v-else-if="item.prop=='vipServer'">
                  <div v-if="scope.row.vipServer==1">
                      <el-tag type="primary">是</el-tag>
                  </div>
                  <div v-else>  
                      <el-tag type="info">否</el-tag>
                  </div>
                </template>
                <template v-else-if="item.prop=='taxFlag'">
                    <span v-if="scope.row.taxFlag==1">是</span>
                  <span v-if="scope.row.taxFlag==0">否</span>
                </template>
                <template v-else>
                    <template v-if="item.prop=='remark'">
                        <el-tooltip class="box-item" effect="dark" :content="scope.row[item.prop]"
                        :teleported="true" popper-class="pc">
                            <div class="multiRowText" style="width: 160px;margin: unset;">{{ scope.row[item.prop] }}</div>
                        </el-tooltip>
                    </template>
                    <template v-else>
                        {{ scope.row[item.prop] }}
                    </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
               <template #default="scope">
                <el-button  size="small" link type="success"  @click="editRow(scope.row.id)" ><el-icon><Edit /></el-icon> 修改</el-button>
                <el-button  size="small" link type="danger" @click="deleteRow(scope.row.id)" ><el-icon><Delete /></el-icon> 删除</el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <pagination
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          small="small"
          disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          @pagination="selectByPage"
        />
      </div>
      <AddStudent ref="addOrUpdateRef" @flushTable="selectByPage"  />
    </div>
  </template>
  <script>
  import { selectDictionaryByTypeCode } from '@/api/system/dictionary.js'
  import { selectByPage, deleteTrade } from '@/api/oss/tradeManage.js'
  import { getAll } from '@/api/oss/student.js'
  import { mapState } from 'vuex'
  import AddStudent from './addOrUpdate.vue'
  import { ElLoading } from 'element-plus'
  export default {
      components:{
       AddStudent
      },
      data() {
          return {
              tableTotal: 0,
              tableLoading: false,
              tableData: [],
              // 查询参数
              queryParams: {
                  pageNo: 1,
                  pageSize: 20,
                  tradeDateStart: '',
                  tradeDateEnd:'',
                  instrumentCode:'',
                  varietyCode:'',
                  studentID:'',
                  offsetFlag:'',
                  speculationArbitrageFlag:'',
              },
              columnList:[
                // {prop:'studentName',label:'学员名称',sortable:false,sort:1,hide:false,fixed:true,width:150},
                // {prop:'studentPhone',label:'学员手机号',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'studentAccount',label:'练习账号',sortable:false,sort:1,hide:false,fixed:true,width:150},
                {prop:'instrumentCode',label:'品种合约',sortable:false,sort:2,hide:false,fixed:false,width:150},
                // {prop:'serialNumber',label:'流水号',sortable:false,sort:3,hide:false,fixed:false,width:180},
                {prop:'tradeDate',label:'练习日期',sortable:false,sort:4,hide:false,fixed:false,width:150},
                // {prop:'tradeTime',label:'练习时间',sortable:false,sort:5,hide:false,fixed:false,width:150},
                {prop:'offsetFlag',label:'买/卖',sortable:false,sort:6,hide:false,fixed:false,width:80},
                {prop:'tradeSinglePrice',label:'权利金单价',sortable:false,sort:7,hide:false,fixed:false,width:100},
                {prop:'tradeVolume',label:'练习数量',sortable:false,sort:8,hide:false,fixed:false,width:80},
                {prop:'premium',label:'权利金',sortable:false,sort:9,hide:false,fixed:false,width:100},
                {prop:'tradeMargin',label:'交易保证金',sortable:false,sort:11,hide:false,fixed:false,width:100},
                // {prop:'taxFlag',label:'是否备兑',sortable:false,sort:10,hide:false,fixed:false,width:80},
                // {prop:'commission',label:'手续费',sortable:false,sort:11,hide:false,fixed:false,width:100},
                // {prop:'dataSource',label:'数据来源',sortable:false,sort:15,hide:false,fixed:false,width:100},
                // {prop:'creatorName',label:'创建人',sortable:false,sort:16,hide:false,fixed:false,width:120},
                {prop:'createTime',label:'创建时间',sortable:true,sort:17,hide:false,fixed:false,width:180},
                {prop:'action',label:'操作',sortable:false,sort:18,hide:false,fixed:'right',width:200},
              ],
            tableHeight:(window.innerHeight - 380) + 'px',
            // 学员列表
            studentList:[],
            //买卖方向列表
            buyOrSellList:[],
          }
      },
      created() {
          // 列按照sort升序
          this.columnList = this.columnList.sort((a,b)=>a.sort-b.sort)
          this.selectByPage()
      },
      computed:{
          ...mapState(['amplify'])
      },
      mounted(){
          this.$nextTick(()=>{
            this.countTableHeight()
            // 获取所有学员信息
            getAll({}).then(res=>{
            if (res.code == 1) {
                this.studentList = res.data
            }
            })
            selectDictionaryByTypeCode({"dicTypeCode":"BuyOrSell"}).then(res=>{
                if (res.code == 1) {
                    this.buyOrSellList = res.data
                }
            })
          })
      },
      methods: {
        // 禁止选择的日期
        disabledDateStart(date){
            if (this.isNotBlank(this.queryParams.tradeDateEnd)) {
                let end = new Date(this.queryParams.tradeDateEnd)
                return date.getTime() > end.getTime();
            } else {
                return false
            }
        },
        // 禁止选择的日期
        disabledDateEnd(date){
            if (this.isNotBlank(this.queryParams.tradeDateStart)) {
                let start = new Date(this.queryParams.tradeDateStart)
                date.setDate(date.getDate()+1)
                return date.getTime() < start.getTime();
            } else {
                return false
            }
        },
        deleteRow(id){
            this.$confirm("请确认是否删除 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteTrade({id:id}).then(res => {
                    if (res.code == 1) {
                    this.$message.success(res.message)
                    // 重新获取数据
                    this.onSearch()
                    } else {
                    this.$message.error(res.message)
                    }
                })
            })
        },
        // 打开新增弹窗事件
        openAddModal() {
            this.$refs.addOrUpdateRef.openModal(null)
        },
        editRow(id){
            this.$refs.addOrUpdateRef.openModal(id)
        },
        // 搜索事件
        onSearch() {
            this.queryParams.pageNo = 1
            this.selectByPage()
        },
        // 分页查询事件
        selectByPage() {
            this.tableLoading = true
            selectByPage(this.queryParams).then((res) => {
                this.tableLoading = false
                if (res.code === 1) {
                    this.tableData = res.data.records
                    this.tableTotal = res.data.total
                }
            }).catch(() => {
                this.tableLoading = false
            })
        },
        // 表格高度
        countTableHeight(){
          let tableHeight = (window.innerHeight - 380) + 'px'
          // 计算搜索区域
          var searchContainerList =  document.getElementsByClassName("searchContainer")
          if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                    let searchContainerHeight = searchContainerList[0].offsetHeight
                    // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                    let staticHeight = 60+38+30+15
                    if (this.amplify == true) {
                        // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                        tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                    } else {
                        tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                    }
                    this.tableHeight = tableHeight
                }
        },
      },
      watch: {
          amplify(newValue,oldValue) {
              this.countTableHeight()
          },
      },
  }
</script>
<style lang="css" scoped>
    .multiRowText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: auto;
    }
    :deep(.el-scrollbar) {
        text-align: left;
    }
</style>